<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="common/head.jsp"%>
<script>
    window.local=null;
    window.select_week=null;
    window.select_week_2=null;
    window.select_labCode=null;
    window.select_labCode_2=null;
    window.select_interval=null;
    window.select_interval_2=null;
</script>
<div class="layui-body" onload="init();">
    <div style="padding: 15px;">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this" onclick="local=0;">按实验室管理</li>
                <li onclick="local=1;">按时段管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="">
                        <div class="layui-form-item" style="margin-bottom: 0; margin-top: 10px;">
                            <label class="layui-form-label">实验室名称:</label>
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required" lay-filter="select_lab" id="lab_select">
                                    <c:if test="${labDataList!=null}">
                                        <option value="">请选择一个实验室</option>
                                        <optgroup label="15号教学楼(计算机学院)">
                                            <c:forEach items="${labDataList}" var="lab">
                                                <%--option标签不要换行！--%>
                                                <option value="${lab.labCode}"><c:choose><c:when test="${lab.labTag==0}">${lab.labName}(普通)</c:when><c:otherwise>${lab.labName}(专业)</c:otherwise></c:choose></option>
                                            </c:forEach>
                                        </optgroup>
                                    </c:if>
                                </select>
                            </div>

                            <label class="layui-form-label">时间选择:</label>
                            <%--日期选择器--%>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="select_week" placeholder="请选择一个时间" readonly>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--lab表建立-->
                    <table  lay-filter="lab_table" id="lab_table"></table>

                </div>
                <div class="layui-tab-item">
                    <form class="layui-form" action="">
                        <div class="layui-form-item" style="margin-bottom: 0; margin-top: 10px;">
                            <label class="layui-form-label">时间选择:</label>
                            <div class="layui-input-inline">
                                    <%--日期选择器--%>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="select_week_2" placeholder="请选择一个时间"
                                               readonly>
                                    </div>
                            </div>

                            <label class="layui-form-label">时段选择:</label>
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required" lay-filter="select_interval_2" id="interval_select_2">
                                    <option value=""></option>
                                    <option value="one">1-2节课</option>
                                    <option value="two">3-4节课</option>
                                    <option value="three">5-6节课</option>
                                    <option value="four">7-8节课</option>
                                    <option value="five">9-10节课</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <!--time表建立-->
                    <table  lay-filter="time_table" id="time_table"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<%@include file="/jsp/root/common/foot.jsp" %>
<script type="text/javascript">
    /*初始化配置*/
    function init(){
        local=0;/*实验室预约界面*/
        let flag = sessionStorage.getItem("flag");
        if (flag == null || flag == undefined) {
            sessionStorage.setItem("flag", "yes");
            //调用显示弹窗方法
            showEject();
        }
        if (flag == "yes") {
            showEject();
        }
        render();
        render2();
    }
    window.onload=init;
    /*获取下拉菜单数据*/
    layui.use(['form','table'],function () {
        let form = layui.form;
        form.on('select(select_lab)', function(data){
            select_labCode=data.value;
            /*存在两次点击提示栏的可能*/
            if (select_labCode!=null && select_week!=null && select_labCode!="" && select_week!=""){
                render();
            }

        });
    })
    /*查询数据*/
    function render(){
        layui.use('table', function() {
            var table = layui.table;
            table.render({
                elem: "#lab_table",
                url: '${pageContext.request.contextPath}/jsp/apply.do?method=getLabWeekDataByLabName&labCode='+select_labCode+'&week='+select_week
                ,size: 'lg'
                ,even: true
                ,skin: 'row'
                ,cols: [
                    [{
                        field: 'interval',
                        title: '时段',
                        width: 220,
                        id:'interval'
                        ,unresize: 'true'
                    }, {
                        field: 'open',
                        title: '是否开放',
                        templet: '#openTpl',
                        width: 220,
                        unresize: 'true'
                    }, {
                        field: 'a',
                        title: '',
                        width: 180,
                        unresize: 'true'
                    }, {
                        field: 'a',
                        title: '',
                        width: 180,
                        unresize: 'true'
                    }, {
                        field: 'a',
                        title: '',
                        unresize: 'true'
                    }]
                ]
                ,parseData:function (res) {
                    return{
                        code:0
                        ,msg:"获取数据成功"
                        ,count:5/*lab_table表只能有5行*/
                        ,data:res.data
                    }
                }
            });
        });
    }

    /*获取下拉菜单数据*/
    layui.use(['form','table'],function () {
        let form = layui.form;
        form.on('select(select_interval_2)', function(data){
            select_interval_2=data.value;
            if (select_interval_2!=null && select_week_2!=null && select_interval_2!="" && select_week_2!=""){
                render2();
            }
        });
    })
    /*查询数据*/
    function render2(){
        layui.use('table', function() {
            var table = layui.table;
            table.render({
                elem: "#time_table",
                url: '${pageContext.request.contextPath}/jsp/apply.do?method=getLabIntervalData&week='+select_week_2+'&interval='+select_interval_2,
                size:'lg',
                skin:'row',
                page:true
                ,even:true
                ,limit:5
                ,limits:[1,5]
                ,autoSort: false
                ,cols: [
                    [{
                        field: 'lib',
                        title: '实验室名称',
                        width: 220,
                        unresize: 'true'
                    }, {
                        field: 'open',
                        title: '是否开放',
                        width: 220,
                        unresize: 'true'
                        , templet: '#openTpl'
                    }, {
                        field: 'a',
                        title: '',
                        width: 180,
                        unresize: 'true'
                    }, {
                        field: 'a',
                        title: '',
                        width: 180,
                        unresize: 'true'
                    }, {
                        field: 'a',
                        title: '',
                        unresize: 'true'
                    }]
                ]
                ,parseData:function (res) {
                    let result;
                    if(this.page.curr){
                        result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    }
                    else{
                        result=res.data.slice(0,this.limit);
                    }
                    return{
                        "code":0
                        ,"data":result
                        ,"count": res.total
                    }
                }
            });
        });
    }
</script>
<%--动态设置单元格格式--%>
<script type="text/html" id="openTpl">
    {{#  if(d.open === '是'){ }}
    <input type="checkbox" name="status" id="switch_open" lay-skin="switch" lay-text="开放中|未开放" lay-event="close" lay-filter="switch" checked >
    {{#  } else { }}
    <input type="checkbox" name="status" id="switch_close" lay-skin="switch" lay-text="开放中|未开放" lay-filter="switch" lay-event="open">
    {{#  } }}
</script>
<%--时间选择器--%>
<script type="text/javascript">
    layui.use('laydate', function() {
        let laydate = layui.laydate;
        laydate.render({
            elem: '#select_week'
            , min: 0
            , max: 6
            ,trigger:'click'
            ,theme: 'molv'
            ,done: function (value) {
                select_week = getWeek(value);
                if (select_labCode!=null && select_week!=null && select_labCode!="" && select_week!=""){
                    render();
                }
            }
        });
    });

    layui.use('laydate', function() {
        let laydate = layui.laydate;
        laydate.render({
            elem: '#select_week_2'
            , min: 0
            , max: 6
            ,trigger:'click'
            ,theme: 'molv'
            ,done: function (value) {
                select_week_2 = getWeek(value);
                if (select_interval_2!=null && select_week_2!=null && select_interval_2!="" && select_week_2!=""){
                    render2();
                }
            }
        });
    });
    /*小提示*/
    $('#select_week').on('click', function(){
        let that = this;
        layer.tips('请选择从今天起，未来7天内的一天', that,{ tips: [1, '#009688'],time:2500});
    });
    $('#select_week_2').on('click', function(){
        let that = this;
        layer.tips('请选择从今天起，未来7天内的一天', that,{ tips: [1, '#009688'],time:2500});
    });
    /*获取网络北京时间*/
    function getNowFormatDate() {
        var currentdate;
        $.ajax({
            type: 'GET',
            dataType: 'json',
            async: false,
            url: 'http://quan.suning.com/getSysTime.do',
            success: function (data) {
                var data = data.sysTime2;
                currentdate = data.slice(0, 16);
            }
        });
        return currentdate
    }
    /*将具体日期转换为week*/
    function getWeek(date) {
        switch (new Date(date).getDay()) {
            case 0:return 'sun';
            case 1:return 'mon';
            case 2:return 'tue';
            case 3:return 'wed';
            case 4:return 'thur';
            case 5:return 'fri';
            case 6:return 'sat';
            default:return null;
        }
    }
</script>
<%--是否开放按钮持久化--%>
<script type="text/javascript">
    layui.use(['form','layer'],function () {
        let form = layui.form;
        form.on('switch(switch)',function (obj) {
            let url=null;
            let state=obj.elem.checked;
            // 获取当前控件
            var selectIfKey=obj.othis;
            // 获取当前所在行
            var parentTr = selectIfKey.parents("tr");
            // 获取当前所在行的interval值
            var parentTrInterval = parentTr.text().split(' ')[0];
            if (local === 0){
                switch (parentTrInterval) {
                    case '1-2':select_interval='one';break;
                    case '3-4':select_interval='two';break;
                    case '5-6':select_interval='three';break;
                    case '7-8':select_interval='four';break;
                    case '9-10':select_interval='five';break;
                }
                url="${pageContext.request.contextPath}/jsp/root.do?method=setOpenState&labCode="+select_labCode+"&week="+select_week+"&interval="+select_interval+"&state="+state;
                /*将选择持久化*/
                $.ajax({
                    type: "POST"
                    ,url:url
                    ,success:function (data) {
                        if (data == null){
                            layer.msg('无法访问端口，修改失败');
                            noChange();
                        }else if (data.success === "yes"){
                            layer.msg('修改成功');
                            render2();
                        }else if (data.success === "no"){
                            layer.msg('修改失败');
                            noChange();
                        }
                    }
                    ,error:function () {
                        layer.msg('无法访问端口，修改失败');
                        noChange();
                    }
                });
            }else if (local === 1){
                let state=obj.elem.checked;
                // 获取当前控件
                var selectIfKey=obj.othis;
                // 获取当前所在行
                var parentTr = selectIfKey.parents("tr");
                // 获取当前所在行的interval值
                var parentTrLabName = parentTr.text().split(' ')[0];
                select_labCode_2=parentTrLabName;
                /*原先的select_labCode存储得到其实是labName,要进行查询就要把labName转换成labCode*/
                /*此处需要等待异步刷新数据后再执行操作*/
                let flag=false;
                myajax=$.ajax({
                    type:"POST"
                    ,url:"${pageContext.request.contextPath}/jsp/root.do?method=getLabCodeByLabName&labName="+select_labCode_2
                    ,dataType: "json"
                    ,success:function (data) {
                        select_labCode_2=data.labCode;
                        flag=true;
                    }
                    ,error:function () {
                        select_labCode_2=null;
                        flag=true;
                    }
                });
                $.when(myajax).done(function () {
                    if (flag){
                        url="${pageContext.request.contextPath}/jsp/root.do?method=setOpenState&labCode="+select_labCode_2+"&week="+select_week_2+"&interval="+select_interval_2+"&state="+state;
                        /*将选择持久化*/
                        $.ajax({
                            type: "POST"
                            ,url:url
                            ,success:function (data) {
                                if (data == null){
                                    layer.msg('无法访问端口，修改失败');
                                    noChange();
                                }else if (data.success === "yes"){
                                    layer.msg('修改成功');
                                    render();
                                }else if (data.success === "no"){
                                    layer.msg('修改失败');
                                    noChange();
                                }
                            }
                            ,error:function () {
                                layer.msg('无法访问端口，修改失败');
                                noChange();
                            }
                        });
                    }
                })
            }
            /*防止按钮变化*/
            function noChange() {
                let swt = $(obj.elem);
                swt.prop('checked',!obj.elem.checked);
                layui.form.render();
            }
        });
    });
</script>
</body>
</html>